<template>
  <view style="padding: 20rpx 20rpx 0 20rpx">
    <view class="card" :class="[{'blur': blur, 'shadow': shadow, 'border':border},customClass]" :style="customStyle">
      <slot/>
    </view>
  </view>
</template>
<script setup>
defineProps({
  blur: {
    type: Boolean,
    default: false
  },
  shadow: {
    type: Boolean,
    default: true
  },
  border: {
    type: Boolean,
    default: false
  },
  customStyle: {
    type: Object,
    default: () => ({})
  },
  obj: {
    type: Object,
    default: () => ({})
  },
  customClass: {
    type: Array,
    default: []
  }
})

</script>
<style lang="scss">
.card {
  background: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  color: #333;
}

.shadow {
  box-shadow: 0 0 20rpx rgba(199, 199, 199, 0.4);
}

.border {
  border: 1rpx solid #e2e2e2;
}

.blur {
  backdrop-filter: blur(20rpx);
  -webkit-backdrop-filter: blur(20rpx); /* Safari 兼容 */
  background-color: rgba(255, 255, 255, 0.7) !important;
  border: 1rpx solid rgba(255, 255, 255, 0.1); /* 边框光泽 */
  box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.8); /* 阴影增强立体感 */
}
</style>